<template>
  <div class="trend-analysis"
       v-loading="trendLoading"
       element-loading-text="拼命加载中"
       element-loading-spinner="loading-type-a"
       element-loading-background="rgba(255, 255, 255, 1)"
  >
   <!-- <div v-if="trendLoading" class="loading-wrap"></div>-->
    <div v-if="trendNoDataState" class="no-data-wrap small">
      <p>暂无数据</p>
    </div>
    <div id="trend-analysis-chart"></div>
  </div>
</template>

<script>
    // import {formatDate} from '../../dateformat.js'
    export default {
        name: "trendAnalysis",
        data(){
            return {
              trendLoading:true,
              trendNoDataState: false
            }
        },
        methods: {
          createTrendAnalysis(){
            let myChart = this.$echarts.init(document.getElementById('trend-analysis-chart'));
            var date = new Date();
            this.trendLoading = true;
            this.trendNoDataState = false;
            this.$http.get('/Receiving/areaProjectTrendChart',{
              params:{
              }
            }).then((response)=>{
              let dataJson = response.data;
              if(dataJson.code === 0) {
                let info = dataJson.content.info;
                let list = info.yAxis;
                let seris = [];
                if(list.length === 0){
                  this.trendNoDataState = true;
                }
                for(let i=0;i<list.length;i++){
                  var yx=list[i];
                  seris.push({
                    name:yx.name,
                    data: yx.list,
                    type: 'line',
                    symbolSize: 10
                  });
                }
                let option = {
                  color:['#cea916','#1875d0','#11c053'],
                  tooltip: {
                    trigger: 'axis'
                  },
                  legend: {
                    bottom: 12
                  },
                  grid:{
                    bottom: 82,
                    top: 20,
                    right: 30
                  },
                  xAxis: {
                    type: 'category',
                    data: info.xAxis,
                    axisLine: {
                      lineStyle:{
                        color:"#c6d1de"
                      }
                    },
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      color:'#999999'
                    },
                    splitLine: {
                      show: true
                    }
                  },
                  yAxis: {
                    name:'监测值',
                    nameLocation: 'middle',
                    nameTextStyle:{
                      color:"#999999"
                    },
                    nameGap: 36,
                    type: 'value',
                    axisLine: {
                      lineStyle:{
                        color:"#c6d1de"
                      }
                    },
                    axisTick: {
                      show: false
                    },
                    axisLabel: {
                      color:'#999999'
                    },
                    splitNumber: 10
                  },
                  series: seris
                };
                console.log(myChart)
                myChart.setOption(option);
              }
              this.trendLoading = false;
            }).catch((error)=>{
              this.trendLoading = false;
              this.trendNoDataState = true;
            });
          }
        },
        mounted(){
          this.createTrendAnalysis();
        }
    }
</script>

<style scoped>
.trend-analysis{
  height: 380px;
  position: relative;
}
#trend-analysis-chart{
  height: 380px;
  width: 692px;
}
</style>
